iT邦幫忙

2022 iThome 鐵人賽

DAY 5
1
自我挑戰組

九局下半的學習日誌系列 第 5

<DAY5><HTML> 多選下拉式選單 select2

  • 分享至 

  • xImage
  •  

select2 CDN,放在head裡:

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

html:
multiple 讓你可以多選。
給id方便js串起來。

<div class="selcenter">
     <select class="form-control" id="select1" multiple="multiple">
                        <option value="1">border</option>
                        <option value="2">bordernum</option>
                        <option value="3">bordernumber</option>
                        <option value="4">bordernumberservice</option>

     </select>
</div>

js:

allowClear是用來刪除多選的選項。
maximumSelectionLength是最多能選幾個。

<script>
        var selectory = $('#select1').select2({
            width: "100%",
            allowClear: true,
            maximumSelectionLength: 4,
        });
</script>

select2 有更多好用的酷東東,可至官網查看,之後有用到其他的在放上來。


上一篇
<DAY4><HTML>圖片連結 縮放畫面圖片比例固定 文字疊圖片
下一篇
<DAY6><HTML><Bootstrap> 環境 容器與網格
系列文
九局下半的學習日誌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言